<template>
    <div class="app-container">
        <div class="entering-top"> 
         <div class="entering-title">{{ titleName }}</div>
          <el-button type="primary" color="#fff" @click="goBack"  :icon="ArrowLeft">返回</el-button>
      </div> 
      <div class="entering-main">
            <div class="main-title">保后内容</div>
            <div class="entering-form">
               <el-form :model="formData" ref="enteringRef" :rules="rules" :disabled="viewShow" :hide-required-asterisk="viewShow" label-width="120px">
                  <el-row>
                    <el-col :span="14" :offset="2">
                        <el-form-item label="担保编号：" prop="apply_id">
                          <el-autocomplete v-model="formData.apply_id" 
                                :fetch-suggestions="querySearchAsync"
                                placeholder="可输入担保编号或担保人查找"
                                @select="handleSelect"
                                @change="handleChange"
                                style="width:240px"
                                clearable
                            >
                            <template #default="{ item }">
                                <div v-show="item.user_name!==''">{{ item.value }}（{{item.user_name}}）</div>
                                </template>
                        </el-autocomplete>
                        </el-form-item>
                        <div v-if="detailShow" class="loan-detail">担保人姓名： {{queryDetail.user_name}}&nbsp;&nbsp;&nbsp; 担保期限： {{queryDetail.loan_stages}}期 &nbsp;&nbsp;&nbsp;担保金额： {{queryDetail.amount}}元 &nbsp;&nbsp;&nbsp;担保剩余：{{queryDetail.loan_amount}}元 </div>
                        <el-form-item label="检查方式：" prop="method">
                            <el-radio-group v-model="formData.method" >
                                <el-radio :label="1">电话检查</el-radio>
                                <el-radio :label="2">实地检查</el-radio>
                             </el-radio-group>
                        </el-form-item>
                        <el-form-item label="检查原因：" prop="cause">
                            <el-radio-group v-model="formData.cause" >
                                <el-radio :label="1">首次检查</el-radio>
                                <el-radio :label="2">日常检查</el-radio>
                                <el-radio :label="3">逾期检查</el-radio>
                                <el-radio :label="4">其它</el-radio>
                             </el-radio-group>
                        </el-form-item>
                        <el-row style="margin-bottom: 20px;" >
                            <div class="enter-label"><span v-if="!viewShow" style="color:red">*</span>合同内容：</div>
                            <el-col :span="17">
                                <Editor ref="editorRef"  :modelValue="formData.content" :height="200"></Editor>
                            
                                <div style="margin-top:20px">
                                    <FileUpload :viewShow="!viewShow"  ref="fileUploadRefs"></FileUpload>
                               
                                </div>
                            </el-col> 
                        </el-row>
                    </el-col>
                  </el-row>
                  <div class="main-title">保后处理意见</div>
                  <el-row>
                    <el-col  :span="12" :offset="4" style="margin-bottom:20px">
                        什么是担保五级分类<el-link href="https://" target="_blank" > <el-icon  class="el-icon--right" :size="18"><QuestionFilled /></el-icon></el-link>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col  :span="12" :offset="2">
                        <el-form-item label="担保归类：" prop="classify">
                            <el-radio-group v-model="formData.classify" >
                                <el-radio :label="1">正常担保</el-radio>
                                <el-radio :label="2">关注担保</el-radio>
                                <el-radio :label="3">次级担保</el-radio>
                                <el-radio :label="4">可疑担保</el-radio>
                                <el-radio :label="5">损失担保</el-radio>
                             </el-radio-group>
                        </el-form-item>
                        <el-form-item label="具体建议：" prop="suggestion">
                          <el-input   rows="5" type="textarea" v-model="formData.suggestion" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <div v-if="!viewShow" style="text-align: center;margin-left:-120px;margin-top:30px;">
                    <el-button type="primary" @click="preStep()">提交</el-button>
                    <el-button type="primary"   @click="goBack()">返回</el-button>
                </div>
               </el-form>
            </div>
      </div>
    </div>
</template>
<script setup name="Entering">
 import { formatDate } from "@/utils/index.js";
import { ArrowLeft ,QuestionFilled} from  '@element-plus/icons-vue'
import { onActivated } from 'vue';
import {  loanInspectAdd , loanInspectQuery,loanInspectQueryInfo } from "@/api/afterLoan/index";
import { useRoute, useRouter } from 'vue-router';
import { getId } from "@/utils/auth";
const { proxy } = getCurrentInstance();
const titleName = ref('保后录入');
const viewShow = ref(false);
const route =  useRoute()
const router = useRouter()
const data = reactive({
    queryDetail:{
        amount:"",
        apply_id:"",
        user_id:"",
        user_name:"",
        loan_stages:"",
        loan_amount:"",
    },
    formData:{},
    rules:{
        apply_id: [{ required: true, message: "请输入担保编号", trigger: "blur" }], 
        method: [{ required: true, message: "请选择检查方式", trigger: "change" }], 
        cause: [{ required: true, message: "请选择检查原因", trigger: "change" }], 
        classify: [{ required: true, message: "请选择担保归类", trigger: "change" }], 
    }
});
const detailShow  = ref(false);
const {formData,queryDetail,rules} = toRefs(data);
function querySearchAsync (queryString, cb)  {
//   后端请求数据
if(queryString){
    let apply_id,user_name;
    if(!isNaN(parseFloat(queryString))&&isFinite(queryString)){
        user_name = queryString;
        apply_id = queryString;
   }else{
      user_name = queryString;
      apply_id = null;
   }
    loanInspectQueryInfo({
        apply_id,
        user_name
       }).then(res=>{
      let rest= res.data
        if(rest.length>0){
                rest.forEach(itm=>{
                    itm['value'] = apply_id;
                })
        }
        cb(rest)
      })
}else{
    cb([])
}
}
const handleSelect = (item) => {
  formData.value.apply_id = item.apply_id;
  queryDetail.value = item ;
  detailShow.value = true;
}
const handleChange = (vv)=>{
    if(!vv){
        detailShow.value = false;
    }
}
function getInfos(){
    if(route.query.apply_id){
        titleName.value = "保后任务"
        viewShow.value = true;
        loanInspectQuery(route.query.id).then(res=>{
            formData.value = res.data;
            proxy.$refs.fileUploadRefs.showFileList(res.data.file_name,res.data.file_path);
        })
    }else{
        viewShow.value = false;
        titleName.value = "保后录入";
        proxy.resetForm("enteringRef");
    }
}
function goBack() {
    proxy.$tab.closeOpenPage('check')
}
function preStep(){
    if(!detailShow.value){
        formData.value.apply_id ='';
    }
    proxy.$refs["enteringRef"].validate(valid => {
        let fileInfo = proxy.$refs.fileUploadRefs.getFileInfo();
        if(valid){
            loanInspectAdd({
                ...formData.value,
                user_id:queryDetail.value.user_id,
                apply_id:queryDetail.value.apply_id,
                content:proxy.$refs.editorRef.content,//"检查内容测试",
                file_name:fileInfo.fileName,
                file_path:fileInfo.filePath,
                inspect_time:formatDate(new Date())
            }).then(res=>{
                proxy.$modal.msgSuccess("新增成功");
                goBack();
            })
        }
    })
}
onActivated(()=>{
    getInfos();
})
</script>

<style >
 .entering-title{
   font-size:15px;
   font-weight: bold; 
 }
.entering-top{
    display: flex;
    justify-content: space-between;
    border-bottom:1px solid #ddd;
}
.entering-main{
    padding: 30px 20px;
}
.main-title{
    font-size:18px;
    font-weight: bold; 
    line-height: 52px;
}
.loan-detail{
    line-height: 42px;
    margin-left: 120px;
    margin-bottom: 10px;
    color: rgb(111, 113, 114);
}
.enter-label{
    font-weight: bold;
   font-size: 14px;
   color: #606266;
   width: 120px;
   padding-right: 10px;
   text-align: right;
}
</style>